@charset "utf-8";
/*
* autor cetc-ui 
*/

body,input,select,textarea{font-size:1em;font-family:"Microsoft YaHei",Helvetica,sans-serif;color:#333}
body,h1,h2,h3,h4,h5,p,dd,ul,dl{margin:0; font-weight:normal}
body{ background:#010103; color:#666; font-size:100%; overflow-x:hidden }
ul{padding-left:0;list-style-type:none}
i, em{font-style:normal}
a{ color:#333}
img{ display:block; margin:0 auto}
a, img{border:0;vertical-align:middle; -webkit-touch-callout: none; text-decoration:none; border:none }
ul, ol { list-style:none }
li{ list-style:none; display:inline; }
select{-webkit-appearance: none; border-radius:none;}
table{ border-collapse:collapse }
input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}
html{ overflow-y:hidden}

@font-face {
      font-family: 'digifacewide';
      src: url('fonts/digifacewide-webfont.eot');
      src: url('fonts/digifacewide-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/digifacewide-webfont.woff') format('woff'),
	   url('fonts/digifacewide-webfont.ttf') format('truetype'),
	   url('fonts/digifacewide-webfont.svg#SingleMaltaRegular') format('svg');
      font-weight: normal;
      font-style: normal;
   }

/*header*/
.header{ position: absolute; width:100%; left:0; top:0; text-align: center; color:#fff; height: auto; line-height:2.75em; box-shadow:0 0 5px rgba(0,0,0,0.2); z-index:100 }
.header h1{ color:#00b0f0; font-size:2rem; padding-top:1rem;  }
.header h1 img{ height:2.75rem}
.toptime{ font-size:1.15rem; z-index:101; font-family: 'digifacewide'; color:#fff; text-align:center }
.online{ position:absolute; right:1rem; top:4rem; font-size:0.7rem ; z-index:101; color:#ffc000;  width:14rem; }
.numbers{ font-size:1rem; color:#bfbfbf}
.numbers span{ margin:0 1rem}
.numbers span em{ margin-right:0.5rem }
.numbers span i{  font-family: 'digifacewide'; color:#00b0f0 }
.line{ background:#0070c0; width:50%; margin:0 auto; height:0.25rem; border-radius:0 0 3px 3px}

body{ background:url(../assets/imgs/bg.jpg) no-repeat center top #010103}
.mapbg{ position:absolute; left:0; top:0; width:100%; height:100%; background:url(../assets/imgs/cd1.png) repeat 50% 50%; background-size:cover; opacity:0.2 }

/*公共*/
.wrap-base{  background:url(../assets/imgs/wrap-base.png) no-repeat 50% 50%; background-size:cover; width:21rem; height:18rem; margin-top:1rem; padding:0.75rem; overflow:visible; box-sizing:border-box }
.wrap-base-big{ background:url(../assets/imgs/wrap-base-big.png) repeat 50% 50%; background-size:cover; width:31rem; height:18rem; margin:0 0.5rem; overflow:hidden}
.wrap-base-right{ float:right}
.wrap-base h2{ color:#a1b1d9; font-size:0.875rem; margin-bottom:0.5rem; padding-left:2rem; position:relative; top:-0.2rem; text-align:left}
.wrap-base-bd{ color:#94a4cb; font-size:0.875rem; height:14rem; box-sizing:border-box; padding:1rem; position:relative;overflow: visible}
.wrap-base-bd p{ line-height:1.5rem}
.wrap-base-bd p i{ float:right; font-family: 'digifacewide'; color:#00b0f0 }

/*左侧*/
.wrap-left{ position:absolute; left:5rem; bottom:3rem; width:21rem; z-index:10 }

/*右侧*/
.wrap-right{ position:absolute; right:5rem; bottom:3rem; width:21rem; z-index:10 }

/*中部*/
.wrap-main{ position:absolute; left: 28rem;top: 10rem;width: 65rem;height: 34rem; width:940px; height:560px; overflow:hidden; z-index:10}


/*底部*/
.wrap-foot{ position:absolute; left:0; bottom:3rem; width:100%; height:18rem; box-sizing:border-box; padding:0 27rem; overflow:hidden; text-align: center}
.wrap-foot .wrap-base{ display:inline-block; opacity:1; margin-bottom:0;}
.wrap-foot .wrap-base-right{ float:right}
.wrap-foot .wrap-base-left{ float:left}


.item01{ background:#000; width:10rem; height:10rem; border-radius:50%; position:absolute; left:10rem; top:2rem;}

.safety-supervision{ background:url(../assets/imgs/safety-supervision.png) no-repeat 50% 50%; background-size:cover; width:16rem; height:11rem; position:relative; margin:0.5rem auto 0;}
.safety-supervision dd{ width:4rem; height:6rem; position:absolute; text-align:center; color:#61effc }
.safety-supervision dd b{ display:block; font-size:1.15rem;  font-family: 'digifacewide'; color:#61effc}
.safety-supervision dd h5{ font-size:0.875rem}
.safety-supervision dd:nth-child(1){ left:5.75rem}
.safety-supervision dd:nth-child(1) h5{ position:relative; top:-1rem; margin-bottom:0.5rem}
.safety-supervision dd:nth-child(2){ left:0.3rem; top:7.5rem; }
.safety-supervision dd:nth-child(2) h5{ margin-top:0.75rem}
.safety-supervision dd:nth-child(3){ left:11.1rem; top:7.5rem; }
.safety-supervision dd:nth-child(3) h5{ margin-top:0.75rem}

.basetable{ text-align:left; position:relative; top:-0.75rem; }
.basetable th{ font-weight:normal; padding-bottom:0.25rem; padding:0.5rem; border-bottom:1px solid #7589b4}
.basetable td{ padding:0.5rem}
.basetable tr:nth-child(2n){ background-color: rgba(106,184,255,0.15); } 

.persent{ width:6rem; height:0.875rem; background:#0b246c; border-radius:0.5rem; float:right}
.persent span{ display:block; height:100%; background:#5675d3; color:#fff; text-align: center; border-radius:0.5rem; font-family:Arial, Helvetica, sans-serif; font-size:0.75rem; line-height:0.875rem; }
.runk dd{ padding:0.5rem; overflow:hidden;}
.runk dd:nth-child(2n+1){ background: rgba(50,197,255,0.08);}
.runk dd h5{ float:left}
.runk dd b{ float:right; font-weight:normal; font-family:Arial, Helvetica, sans-serif; margin-right:1rem }

.tips{}
.tips dd{ background:url(../assets/imgs/tips.png) no-repeat left 0.4rem; background-size:auto 0.5rem; text-align:left; padding-left:2rem; margin-bottom:0.5rem; font-size:0.75rem; color:#fb8600; }
.tips dd:nth-child(1), .tips dd:nth-child(2), .tips dd:nth-child(3){ color:#fb8600}

.situation{ text-align:center; padding-top:1rem; }
.situation dd{ display:inline-block; color:#fff; position:relative; margin:0 0.5rem }
.situation dd span{ width:4.5rem; height:4.5rem; display:block; margin-bottom:1rem;
animation:2s linear 0s normal none infinite rotate2;
-moz-animation:2s linear 0s normal none infinite rotate2; /* Firefox */
-webkit-animation:2s linear 0s normal none infinite rotate2; /* Safari and Chrome */
-o-animation:2s linear 0s normal none infinite rotate2; /* Opera */ 
}
.situation dd span img{ width:100%; }
.situation dd h3{font-family: 'digifacewide'; color:#44e1fd; font-size:0.9rem; position:absolute; left:0; top:0; width:4.5rem; text-align:center; line-height:4.5rem; height:4.5rem }
.situation dd p{ margin-bottom:1rem}

.list01{ width:250px; padding-top:50px; float:left }
.list01 li{ display:block; font-size:0.875rem; color:#a1b1d9; width:90%; padding:0 20px; box-sizing:border-box; line-height:1.75rem;}
.list01 li h3{ font-weight:bold; color:#fff; margin-bottom:0.5rem }
.list01 li b{ float:right}
.list01 li em{ float:right}
.list01 li div{ float:right; background:#4e6dbf; width:70px; height:5px; margin-top:10px; position:relative}
.list01 li div span{ display:block; height:100%; }
.list01 li div i{ position: absolute; display:none;
background: rgba(0,0,0,0.8);
opacity: 0.5;
padding: 3px 0;
color: #fff;
left: 0;
top: -21px;
font-size: 12px;
font-family: a;
width: 60px;
text-align: center;
border-radius: 20px;
line-height: 10px; font-family:Arial, Helvetica, sans-serif; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.list01 li div i:after, .list01 li div i:before { border: solid transparent; content: ' '; height: 0; left: 28px; position: absolute; width: 0; } 
.list01 li div i:after { border-width: 5px; border-top-color:rgba(0,0,0,0.8); top: 15px; } 
.list01 li div:hover > i{ display:block}

.blocktit{ padding:0 1rem 0 1.7rem; overflow:hidden; clear:both}
.clockcircle{ float:right; margin-bottom:-1.5rem; margin-top:-0.5rem; margin-right:1rem; position:relative; }
.clockcircle img{ width:4rem; animation:2s linear 0s normal none infinite rotate2;
-moz-animation:2s linear 0s normal none infinite rotate2; /* Firefox */
-webkit-animation:2s linear 0s normal none infinite rotate2; /* Safari and Chrome */
-o-animation:2s linear 0s normal none infinite rotate2; /* Opera */ }
.clockcircle b{ position:absolute; left:0; top:0; width:4rem; height:4rem; line-height:4rem; text-align:center; font-family: 'digifacewide'; color:#31ea76; font-size:1.25rem }
.blocklist{ padding:1.7rem}
.blocklist li{ display:inline-block; float:left; width:0.5rem; height:0.5rem; background:#2d86c6; margin:0 0.2rem 0.2rem 0}
.blocklist li.bg-red{ background:#ff6203}
.blocklist li.bg-yellow{ background:#f6b11b}
.block-cate { clear:both; padding:1rem 0 0 1.7rem}
.block-cate li{ margin-right:1rem; font-size:0.75rem}
.block-cate li em{ display: inline-block; width:0.625rem; height:0.625rem; margin-right:0.2rem}
.bg-green{  background:#2d86c6; }
.bg-yellow{  background:#f6b11b; }
.bg-red{  background:#ff6203; }

.circleactive{  background:url(../assets/imgs/feature-presenter-highlighted.png) no-repeat 50% 50%; width:86px; height:118px; position:absolute; left:498px; top:224px;
animation:0.5s linear 0s normal none infinite scale;
-moz-animation:0.5s linear 0s normal none infinite scale; /* Firefox */
-webkit-animation:0.5s linear 0s normal none infinite scale; /* Safari and Chrome */
-o-animation:0.5s linear 0s normal none infinite scale; /* Opera */ }
.circlebg{ background:url(../assets/imgs/circle-container.png) no-repeat 50% 50%; width:420px; height:420px; position:absolute; left:114px; top:72px; }
.circlelogo{ width:260px; position:absolute; left:190px; top:250px; }
.circlelogo img{ width:108px;}
.circle{ width:240px; height:240px;background:url(../assets/imgs/circle.png) no-repeat center center; background-size:cover; position:absolute; left:200px; top:170px; 
animation:3s linear 0s normal none infinite rotate2;
-moz-animation:3s linear 0s normal none infinite rotate2; /* Firefox */
-webkit-animation:3s linear 0s normal none infinite rotate2; /* Safari and Chrome */
-o-animation:3s linear 0s normal none infinite rotate2; /* Opera */ 
 }
 
 
 #ckLine {
	width: 100%; opacity:0.1;
	height: 100vh;
}

#test-element{ position:relative; z-index:100}

@-webkit-keyframes rotate2{

  0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}

  }

  @-moz-keyframes rotate2{
  0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}

  }

  @-ms-keyframes rotate2{
  0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}

  }

  @-o-keyframes rotate2{
  0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
  50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
  100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}

  }
  
 @-webkit-keyframes scale{

  0%{-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1)}
  50%{-webkit-transform:rotate(0.8, 0.8);-moz-transform:scale(0.95, 0.95)}
  100%{-webkit-transform:rotate(1, 1);-moz-transform:scale(1, 1)}

  }

  @-moz-keyframes scale{
  0%{-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1)}
  50%{-webkit-transform:rotate(0.8, 0.8);-moz-transform:scale(0.95, 0.95)}
  100%{-webkit-transform:rotate(1, 1);-moz-transform:scale(1, 1)}

  }

  @-ms-keyframes scale{
  0%{-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1)}
  50%{-webkit-transform:rotate(0.8, 0.8);-moz-transform:scale(0.95, 0.95)}
  100%{-webkit-transform:rotate(1, 1);-moz-transform:scale(1, 1)}

  }

  @-o-keyframes scale{
  0%{-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1)}
  50%{-webkit-transform:rotate(0.8, 0.8);-moz-transform:scale(0.95, 0.95)}
  100%{-webkit-transform:rotate(1, 1);-moz-transform:scale(1, 1)}

  } 
  
  

@media screen and (min-width:1921px) and (max-width:2560px){
 html{ font-size:130%}
}
@media screen and (min-width:1681px) and (max-width:1920px){
 html{ font-size:100%}
}
@media screen and (min-width:1441px) and (max-width:1680px){
 html{ font-size:85%}
}
@media screen and (min-width:1367px) and (max-width:1440px){
 html{ font-size:75%}
}
@media screen and (min-width:1281px) and (max-width:1366px){
 html{ font-size:70%}
}
@media screen and (min-width:1025px) and (max-width:1280px){html{font-size:67%} }
@media screen and (min-width:360px) and (max-width:1024px){html{font-size:54%} }
